export {}

// 小案例

// 1. 封装一下格式化时间的函数 Date 和 string, 转成 09:07:58
// 参数可以没有,没有的时候用当前时间初始化
const formatTime = (date?: Date | string ): string => {
  // 做个判断 有没有传入时间
  if (!date) date = new Date()
  if (typeof date === 'string') date = new Date(date)
  // 获取小时
  const h = date.getHours()
  // 获取分钟
  const m = date.getMinutes()
  // 获取秒
  const s = date.getSeconds()
  return `${h}:${m}:${s}`
}
let timeStr = formatTime()
console.log(timeStr)

// 2. 定义访问记录的数据 每一项是一个对象 对象里有 次数 和时间
type Data = {
  count: number
  time: string
}

type List = Array<Data>

const KEY = 'ts-demo-data'

// 3. 先获取历史记录
const getData = () => {
  // localStorage中只能存字符串
 const str = localStorage.getItem(KEY)
//  通过JSON.parse解析json
 return JSON.parse(str || '[]') as List
}

// 4. 设置历史记录函数

const updateData = () => {
  // 先拿到本地缓存数据 list:历史记录数据
  const list = getData()
  // 获取最后一项
  const lastItem = list[list.length -1]
  list.push({
    count: lastItem ? lastItem.count + 1 : 1,
    time: formatTime()
  })
  // 数据获取完了 还需要存到本地  localStorage中放的是字符串
  localStorage.setItem(KEY, JSON.stringify(list))
}

// 5. 封装一个获取历史记录并且渲染到页面的函数

const render = () => {
  // 先更新数据
  updateData()
  // 获取数据
  const data = getData()
  const app = document.getElementById('app') as HTMLDivElement
  app.innerHTML = data.map((item) => {
    return `次数: ${item.count}, 时间: ${item.time}`
  }).join('<br/>')
}

render()